<template>
  <div>
    <div @click="back">
      <van-nav-bar left-text="返回" left-arrow title="买票" />
    </div>
    <div id="app">
      <select>
        <option value>请选择省份</option>
        <option>辽宁省</option>
      </select>
      <select>
        <option value>请选择城市</option>
        <option>大连市</option>
      </select>
      <select>
        <option value>请选择区</option>
        <option v-for="item  in arrList" :key="item.id">{{item.area}}</option>
      </select>
      <select>
        <option>请选街道</option>
        <option v-for="item  in arrList" :key="item.id">{{item.address}}</option>
      </select>
      <select v-model="idThem">
        <option value>请选影院</option>
        <option v-for="item  in arrList" :key="item.id" :value="item.id">{{item.name}}</option>
      </select>

      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in alist" :key="item.id">
          <div class="all_list">
            <span class="spanM">电影名:{{item.name}}</span>
            <br />
            <div>上映日期:{{item.playDate}}</div>
            <div>总时长:{{item.duration}}分钟</div>
            <img :src="'http://124.93.196.45:10001/'+item.cover" alt />
            <br />推荐星数:
            <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
            <br />
            <van-button type="primary" @click="xuanpiao(item.likeNum)">买票</van-button>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { cinema, canci, comit, Film, buypiao } from '@/service/movie'
import mixin from '@/mixin/flag'
export default {
  mixins: [mixin],
  data() {
    return {
      arrList: [],
      areaList: {},
      picture: '',
      idThem: '',
      Yid: '', // 电影院id
      movieIdP: '', // 电影id
      list: [],
      loading: false,
      finished: false,
      movieList: '',
      alist: [],
      value: 2.5, // 电影星数
    }
  },
  async created() {
    let saiwen = await cinema()
    this.arrList = saiwen.data.rows
    // 在线电影列表
    const sailuo = await comit()
    this.movieList = sailuo.data.rows.splice(0, 15)
    const leiou = await Film()
    this.alist = leiou.data.rows.splice(1, 10)
    // 电影星数 问题没解决 渲染是只会渲染一个 最后一个全部覆盖之前的
    this.alist.forEach((item) => {
      // console.log('item', item)
      this.value = item.score
      // console.log(this.value,"value");
    })

    const aishi = await buypiao({
      endTime: '06:00',
      movieId: 5,
      orderItems: [
        {
          price: 36.0,
          seatCol: '5',
          seatId: 6,
          seatRow: '7',
        },
      ],
      playDate: '2021-09-10',
      price: 50.0,
      roomId: 1,
      startTime: '04:30',
      theaterId: 16,
      timesId: 21,
    })
    console.log('aishi', aishi)
  },
  methods: {
    async xuanpiao(di) {
      // console.log(di);
      console.log('电影院id', this.Yid, '电影id', di, 10)
      const res4 = await canci({
        roomId: this.Yid,
        id: 10,
      })
      console.log(res4)
    },
    onLoad() {
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (this.list.length >= 40) {
        this.finished = true
      }
    },
    back() {
      this.$router.push('./indexVue')
    },
  },
  watch: {
    idThem(id) {
      console.log(id)
      this.Yid = id
    },
  },
}
</script>

<style  lang="scss" scoped>
img {
  width: 150px;
  height: 160px;
}
.all_list {
  width: 100%;
  height: 310px;
}
.spanM {
  color: red;
  font-size: 17px;

}
</style>